<template>
	<div class="slider" ref="slider">
		<div class="slider-group" ref="sliderGroup">
			<slot></slot>
		</div>
		<div class="dots">
			<span v-for="(item,index) in dots" :class="[ index == currentPageIndex ? 'active dot':'dot' ]" :key="index"></span>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import {
		addClass
	} from 'common/js/dom'
	import BScroll from 'better-scroll'

	export default {
		//   name: COMPONENT_NAME,
		props: {
			loop: {
				type: Boolean,
				default: true
			},
			autoPlay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 4000
			},
			showDot: {
				type: Boolean,
				default: true
			},
			click: {
				type: Boolean,
				default: true
			},
			threshold: {
				type: Number,
				default: 0.3
			},
			speed: {
				type: Number,
				default: 400
			}
		},
		data() {
			return {
				dots: [],
				currentPageIndex: 0
			};
		},
		mounted() {
			this.update();
			window.addEventListener("resize", () => {
				if (!this.slider || !this.slider.enabled) {
					return;
				}
				clearTimeout(this.resizeTimer);
				this.resizeTimer = setTimeout(() => {
					if (this.slider.isInTransition) {
						this._onScrollEnd();
					} else {
						if (this.autoPlay) {
							this._play();
						}
					}
					this.refresh();
				}, 60);
			});
		},
		activated() {
			if (!this.slider) {
				return;
			}
			this.slider.enable();
			let pageIndex = this.slider.getCurrentPage().pageX;
			this.slider.goToPage(pageIndex, 0, 0);
			this.currentPageIndex = pageIndex;
			if (this.autoPlay) {
				this._play();
			}
		},
		deactivated() {
			this.slider.disable();
			clearTimeout(this.timer);
		},
		beforeDestroy() {
			this.slider.disable();
			clearTimeout(this.timer);
		},
		methods: {
			update() {
				if (this.slider) {
					this.slider.destroy();
				}
				this.$nextTick(() => {
					this.init();
				});
			},
			refresh() {
				this._setSlideWidth(true);
				this.slider.refresh();
			},
			prev() {
				this.slider.prev();
			},
			next() {
				this.slider.next();
			},
			init() {
				clearTimeout(this.timer);
				this.currentPageIndex = 0;
				this._setSlideWidth();
				if (this.showDot) {
					this._initDots();
				}
				this._initSlide();
				if (this.autoPlay) {
					this._play();
				}
			},
			_setSlideWidth(isResize) {
				this.children = this.$refs.sliderGroup.children;
				let width = 0;
				let slideWidth = this.$refs.slider.clientWidth;
				for (let i = 0; i < this.children.length; i++) {
					let child = this.children[i];
					addClass(child, "slider-item");
					child.style.width = slideWidth + "px";
					width += slideWidth;
				}
				if (this.loop && !isResize) {
					width += 2 * slideWidth;
				}
				this.$refs.sliderGroup.style.width = width + "px";
			},
			_initSlide() {
				console.log(this.threshold);
				this.slider = new BScroll(this.$refs.slider, {
					scrollX: true,
					scrollY: false,
					momentum: false,
					snap: {
						loop: this.loop,
						threshold: this.threshold,
						speed: this.speed
					},
					bounce: false,
					stopPropagation: true,
					click: this.click
				});
				this.slider.on("scrollEnd", this._onScrollEnd);
				this.slider.on("touchEnd", () => {
					if (this.autoPlay) {
						this._play();
					}
				});
				this.slider.on("beforeScrollStart", () => {
					if (this.autoPlay) {
						clearTimeout(this.timer);
					}
				});
			},
			_onScrollEnd() {
				let pageIndex = this.slider.getCurrentPage().pageX;
				this.currentPageIndex = pageIndex;
				if (this.autoPlay) {
					this._play();
				}
			},
			_initDots() {
				this.dots = new Array(this.children.length);
			},
			_play() {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.slider.next();
				}, this.interval);
			}
		},
		watch: {
			loop() {
				this.update();
			},
			autoPlay() {
				this.update();
			},
			speed() {
				this.update();
			},
			threshold() {
				this.update();
			}
		}
	};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .slider
    min-height: 1px
    .slider-group
      position: relative
      overflow: hidden
      white-space: nowrap
      .slider-item
        float: left
        box-sizing: border-box
        overflow: hidden
        text-align: center
        a
          display: block
          width: 100%
          overflow: hidden
          text-decoration: none
        img
          display: block
          width: 100%
    .dots
      position: absolute
      right: 0
      left: 0
      bottom: 12px
      text-align: center
      font-size: 0
      .dot
        display: inline-block
        margin: 0 4px
        width: 8px
        height: 8px
        border-radius: 50%
        background: $color-text-l
        &.active
          width: 20px
          border-radius: 5px
          background: $color-text-ll
</style>